<template>
	<view>
		<view class="box">
			<view class="list" v-for="(item, index) in list" :key="index">
				<view class="left">
					<image :src="item.url" mode=""></image>
					<view class="con">
						<text>{{ item.name }}</text>
						<view class="pai">
							<text>{{ item.pai }}</text>
						</view>
					</view>
				</view>
				<view class="right">
					<u-radio-group v-model="value"><u-radio @change="radioChange(item.id)" :name="item.id"  :disabled="item.value"></u-radio></u-radio-group>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="bottom">
			<view class="b-left">
				倒计时:<u-count-down :show-border="false" color="#6B8CF0" :timestamp="timestamp"></u-count-down>
			</view>
			<view class="b-right">
				提交
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			timestamp: 86400,
			list: [
				{	
					id:1,
					url: require('../../static/logo.png'),
					name: '王大锤',
					pai: '小组A 1排001号',
					value: false
				},
				{
					id:2,
					url: require('../../static/logo.png'),
					name: '王中锤',
					pai: '小组A 1排001号',
					value: false
				},
				{
					id:3,
					url: require('../../static/logo.png'),
					name: '王小锤',
					pai: '小组A 1排001号',
					value: false
				},
				{
					id:4,
					url: require('../../static/logo.png'),
					name: '王大锤',
					pai: '小组A 1排001号',
					value: false
				},
				{
					id:5,
					url: require('../../static/logo.png'),
					name: '王中锤',
					pai: '小组A 1排001号',
					value: false
				},
				{
					id:6,
					url: require('../../static/logo.png'),
					name: '王小锤',
					pai: '小组A 1排001号',
					value: false
				},
			],
			value:'王大锤'
		};
	},
	methods:{
	
		radioChange(e){
			console.log(e)
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f6f7fb;
}
.box {
	padding: 10rpx 20rpx;
	.list {
		padding: 20rpx 15rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		.left {
			display: flex;
			margin-right: auto;
			.con {
				margin-left: 10rpx;
				.pai {
					color: #9a9a9a;
					margin-top: 10rpx;
					font-size: 16rpx;
				}
			}
			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		}
	}
	
}
.bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		padding: 20rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		.b-left{
			height: 80rpx;
			width: 45%;
			color: #6B8CF0;
			text-align: center;
			line-height: 80rpx;
			background-color: #F0F4FF;
			border-radius: 50rpx 0 0 50rpx;
		}
		.b-right{
			height: 80rpx;
			width: 45%;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
			background-color: #6684FC;
			border-radius: 0rpx 50rpx 50rpx 0;
		}
	}
</style>
